<script setup>
import { countDeviceNum } from "@/api";
import CountUp from "@/components/count-up";

const props = defineProps({
    datas: {
        type: Object,
        default: {
            title: "燃气",
            value: [],
        },
    },
});
</script>

<template>
    <div class="user_overview_tit" v-show="datas.value?.title">
        {{ datas.value.title }}
    </div>
    <el-row class="user-top">
        <el-col
            :span="22"
            class="user_Overview"
            v-for="(item, i) in datas.value.value"
        >
            <el-col
                :span="state.span"
                class="user_Overview_item"
                v-for="(state, id) in item"
            >
                <div class="user_Overview_nums allnum" v-if="state.num">
                    <CountUp :endVal="state.num" :duration="state.duration" />
                    <i class="unit">{{ state.unit }}</i>
                </div>
                <p>{{ state.name }}</p>
            </el-col>
        </el-col>
    </el-row>
    <slot></slot>
</template>

<style scoped lang="scss">
.right-top {
    display: flex;
    // align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.flex {
    display: flex;
    justify-content: center;
    // flex-direction: column; /*使元素垂直排列*/
}
.user-top {
}
.user_overview_tit {
    color: #fff;
    background: url("@/assets/img/image2.png") no-repeat;
    background-size: auto 100%;
    background-position: center center;
    width: 100%;
    margin: 5px 0;
    font-weight: bold;
    text-align: center;
    font-size: 22px;
}
.user_Overview {
    width: 100%;
    padding: 10px 0;
    display: flex;
    /*主轴居中*/
    justify-content: center;
    /*侧轴居中*/
    align-items: center;
    color: #fff;
    font-size: 12px;
    margin: 3px 0;
    border-radius: 4px;
    // box-shadow: 0 0 5px #007AFF;/*边框颜色渐变*/
    background: url("@/assets/img/image6.png") no-repeat;
    background-size: 100% 100%;
    background-position: 0 0;
    .user_Overview_item {
        text-align: center;
        p {
            font-size: 20px;
        }
        .user_Overview_nums {
            display: flex;
            color: #47ffff;
            text-shadow: #fff;
            font-size: 22px;
            font-weight: 600;
            font-family: "";
            justify-content: center;
            align-items: baseline;
            .unit {
                font-size: 18px;
                // width: 20px;
            }
        }
    }
}
</style>
